<template>
  <view class="page">
    <view class="main">
      <view class="bg-white radius-lg padding margin-top" v-for="(item, index) in knowledgeList" :key="index">
        <u-text :text="`【${index + 1}】 ${item}`" size="32rpx" color="#333"></u-text>
      </view>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <view class="padding-lr">
        <u-icon name="/static/icon/icon-trash.png" size="48rpx"></u-icon>
        <u-text margin="10rpx 0 0 0" align="center" text="删除" size="20rpx" color="#999"></u-text>
      </view>
      <u-button size="large" shape="circle" :color="themePrimary" text="确定" @click="confirm"></u-button>
    </view>
  </view>

</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeSecondary, themeTertiary } = useTheme();
const imageUrl = ref('');
const knowledgeList = ref([]);

onLoad((options) => {
  imageUrl.value = options.url;
  console.log('imageUrl', imageUrl.value);
  // 不加延时，下面的showLoading不显示
  setTimeout(() => {
    handleConfirm()
  }, 500);
});

const handleConfirm = () => {
  uni.showLoading({
    title: '识别中...',
  });
  uni.uploadFile({
    url: 'http://120.26.210.23:8888/jeecgboot/study/ai/identifyKnowledge',
    filePath: imageUrl.value,
    name: 'file',
    formData: {
      file: imageUrl.value
    },
    header: {
      'Content-Type': 'multipart/form-data'
    },
    success: (res) => {
      console.log('ocr', JSON.parse(res.data));
      const data = JSON.parse(res.data);
      knowledgeList.value = data.result.knowledges;
      console.log('knowledgeList', knowledgeList.value);
      uni.hideLoading();
    },
    fail: (err) => {
      console.log('ocr error', err);
      uni.hideLoading();
    }
  });
};

const confirm = () => {
  uni.showToast({
    title: '提交成功！',
    icon: 'success'
  });
};
</script>